<%@taglib prefix="s" uri="/struts-tags" %>
<script type="text/javascript">

    $(document).ready(function() {
        $("#networks").css("margin-top", "50px");
        var valueNetName;

        $('.netName').focus(function() {
            valueNetName = $(this).val();
            if (valueNetName == "Network name") {
                $(this).val("");
            }
        });

        $('.netName').blur(function() {
            if ($(this).val() == "") {
                $(this).val("Network name");
            }
        });

        var firstNetwork = $("#items").find(".item").first();
        firstNetwork.find(".eachNetworkName").addClass("selecting");
        var networkId = firstNetwork.find("input[name='networkId']").val();
        $.ajax({
            url: "viewDevices.action",
            data:"networkId=" + networkId,
            type:"post",
            success:function(data) {
                $("#deviceInfo").html(data);
                $(".dataTables_empty").text("There is not any device");
                firstNetwork.attr({disabled:false});
                $("input[name='selectedDevice']").val("");
            }
        });

        $(".removeNetwork").hide();

        $(".item").hover(function() {

            $(this).find(".removeNetwork").show();
        },
                function() {

                    $(this).find(".removeNetwork").hide();
                }
                );

        $("#saveNetwork").click(function() {
            var networkName = $("input[name='networkName']").val();
            if (networkName == "Network name" || networkName == "") {
                alert("Please ,input the network name");
            } else {
                if (networkName.length >= 15) {
                    alert("Network name is long.Please input another name !");
                } else {
                    $.ajax({
                        url: "addNewNetwork.action",
                        data:"networkName=" + networkName,
                        type:"post",
                        success:function(data) {
                            $("input[name='networkName']").val("Network name");
                            $("#addNetwork").hide("slow");
                            location.reload();

                        }
                    });
                }

            }
        });

        $(".add").click(function () {
            var hh = $("#header").height()+ $("#content").height()+ $("#footer").height()+$("#menuLay").height()+2*25+80+2*10;
            $('#grayBox').css({ opacity: 0.7, 'width':"100%",'height':hh});
            $("#addNetwork").show("slow");

        });

        $(".closeWindow").click(function (e) {

            var networkName = $("input[name='networkName']").val();
            if (networkName == "Network name" || networkName == "") {
                $("#addNetwork").hide("slow");
                $('#grayBox').css("width", "0px");
                $('#grayBox').css("height", "0px");
            } else {
                if (confirm("Do you want to cancel your data?")) {
                    $("#addNetwork").hide("slow");
                    $('#grayBox').css("width", "0px");
                    $('#grayBox').css("height", "0px");
                    $("input[name='networkName']").val("Network name");
                    return false;
                }

                return false;
            }
        });

        $(".removeNetwork").click(function() {
            if (confirm("Do you really want to remove this network")) {
                var networkId = $(this).parent().find("input[name='networkId']").val();
                $.ajax({
                    url: "removeNetwork.action",
                    data:"networkId=" + networkId,
                    type:"post",
                    dataType:"json" ,
                    success:function(data) {

                        if (data.result != "") {
                            alert(data.result);
                        }
                        else {
                            location.reload();
                        }
                    },
                    error:function(data) {
                        alert(data);
                    }
                });
            }
        });
    });
</script>
<style type="text/css">

    #addNetwork {
        background-color: #aaaaaa;
        margin-top: -50px;
        margin-left: 250px;
        border: #555555 solid 3px;
        display: none;
        position: fixed;
        width: 400px;
        height: 200px;
        z-index: 100;
    }

    .removeNetwork img {
        border: none;
    }

    #close {
        height: 24px;
        width: 400px;
        margin-top: 0px;

    }

    h3 {
        margin-top: 0px;
        margin-left: 80px;
        font-style: italic;
        font-size: 18px;
        margin-bottom: 40px;
    }

    #close a {
        float: right;
        margin-right: 0px;
        width: 24px;
    }

    #close a img {
        border: none;
    }

    .netName {
        height: 31px;
        margin-left: 50px;
        text-align: center;
        float: left;

    }

    .add a {
        text-decoration: none;
        color: #212121;
    }

    #grayBox {
        position: absolute;
        left: 0;
        top: 0;
        background: #000;
        z-index: 90;
    }

    #ulUsers {
        margin-left: 0;
    }

    #allUsers {
        margin-left: 0;
    }

    .subUser {
        margin-left: 0;
    }
</style>
<div id="grayBox"></div>
<input type="hidden" value="<s:property value ='items' />" name="items"/>

<div id="addNetwork">
    <div id="close">

        <a href="#" class="closeWindow">
            <img src="<%=request.getContextPath()%>/images/close/close.png" width="24" height="24"/>
        </a>
    </div>
    <h3> Creating new network </h3>

    <input type="text" class="netName" name="networkName" value="Network name"/>
    <input type="button" value="Save" id="saveNetwork"
           style="margin-left: 10px;width: 80px;height: 33px;margin-top:3px; float: left;"/>
</div>
<div id="items">
    <s:if test="%{items!=null}">
        <s:iterator value="items" var="item" status="s_item">
            <li class="item">
                <div class="eachNetworkName">
                    <img src="<%=request.getContextPath()%>/images/content/package_network.png" width="16" height="16"/>
                    <s:property value="#item.name"/>
                </div>
                <input type="hidden" value="<s:property value="#item.networkId" />" name="networkId"/>
                <s:if test="%{#session.user.userType.value==1}">
                    <a href="#" class="removeNetwork">
                        <img src="<%=request.getContextPath()%>/images/admin/remNetwork.png" width="12" height="12"
                             title="Remove network"/>
                    </a>
                </s:if>
            </li>
        </s:iterator>
        <s:if test="%{#session.user.userType.value==1}">
            <li class="add">
                <img src="<%=request.getContextPath()%>/images/admin/addNetwork.png" width="16" height="16"
                     title="Add network"/>
                <a href="#">Add new</a>
            </li>
        </s:if>
        <input type="hidden" name="isHidden" value="0"/>
    </s:if>
    <s:else>
        <s:text name="msg.nothaving.network"/>
    </s:else>

</div>

